<template>
  <div class="kitchen">
    <div class="h-[350px] relative kitchen-bg">
      <Search class="absolute top-[320px]" />
    </div>
    <!-- 分类 -->
    <div class="flex justify-between mt-50">
      <div v-for="(item, index) in categories" :key="index" class="category-item p-3">
        <van-image width="5rem" height="5rem" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <span class="category-name text-[14px]">{{ item.name }}</span>
      </div>
    </div>

    <!-- 推荐菜 -->
    <ul class="flex justify-center">
      <li v-for="(item, index) in list" :key="index" class="w-[90%] h-[240px] rounded-xl">
        <img class="w-[100%] h-[80%] rounded-xl" :src="item.image" alt="" />
        <div class="mt-2 text-[14px]">{{ item.name }}</div>
        <div class="text-[12px] text-[#999]">{{ item.desc }}</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Search from './components/search/index.vue'
  defineOptions({
    name: 'Kitchen',
  })

  // 定义分类数据
  const categories = [
    { name: '家常菜', icon: '@/assets/images/home-cooked.png' },
    { name: '快手菜', icon: '@/assets/images/quick-cook.png' },
    { name: '下饭菜', icon: '@/assets/images/rice-accompanying.png' },
    { name: '早餐', icon: '@/assets/images/breakfast.png' },
  ]

  // 菜列表数据
  const list = ref([
    {
      id: 1,
      name: '红烧肉',
      image: 'https://qcloud.dpfile.com/pc/TKFWyNGqNizirpOyJDmk4TYtINTHWk8FJYBtKi9nUebgYuV7mcAempDblxrj5XHP.jpg',
      desc: '红烧肉是中国传统名菜之一，属于川菜系。主要原料为猪肉，辅以葱、姜、蒜等调味品烹制而成。红烧肉色泽红亮，肉质酥烂，味道醇厚，香气扑鼻。是家喻户晓的美食佳肴。',
    },
    {
      id: 2,
      name: '宫保鸡丁',
      image: 'https://img0.baidu.com/it/u=1138229339,3262343664&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=632',
      desc: '宫保鸡丁是川菜中的一道传统名菜，主要原料为鸡肉、花生米、青椒、干辣椒等。宫保鸡丁色泽红亮，口感麻辣鲜香，鸡肉鲜嫩，花生米酥脆，是川菜中的经典之作。',
    },
    {
      id: 3,
      name: '鱼香肉丝',
      image: 'https://img1.baidu.com/it/u=1259653308,1841141739&fm=253&app=138&f=JPEG?w=800&h=800',
      desc: '鱼香肉丝是一道传统的川菜，主要原料为猪肉、木耳、胡萝卜、青椒等。鱼香肉丝色泽红亮，口感鲜美，猪肉鲜嫩，木耳脆爽，是川菜中的经典之作。',
    },
    {
      id: 4,
      name: '麻婆豆腐',
      image: 'https://img1.baidu.com/it/u=1259653308,1841141739&fm=253&app=138&f=JPEG?w=800&h=800',
      desc: '麻婆豆腐是川菜中的一道传统名菜，主要原料为豆腐、牛肉末、豆瓣酱等。麻婆豆腐麻辣鲜香，豆腐嫩滑，牛肉香浓，是川菜中的经典之作。',
    },
    {
      id: 5,
      name: '回锅肉',
      image: 'https://img1.baidu.com/it/u=1259653308,1841141739&fm=253&app=138&f=JPEG?w=800&h=800',
      desc: '回锅肉是川菜中的一道传统名菜，主要原料为猪肉、青椒、蒜苗等。回锅肉色泽红亮，口感麻辣鲜香，猪肉鲜嫩，青椒脆爽，是川菜中的经典之作。',
    },
  ])
</script>

<style lang="scss" scoped>
  .kitchen-bg {
    background-image: url('@/assets/images/626.jpg');
    background-size: cover;
    background-position: center;
  }

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .category-name {
    margin-top: 5px;
  }

  ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
  }
</style>
